<template>
	<view class="content">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view
			style="width: 100%;display: flex;justify-content: space-between;align-items: center;padding: 0 16rpx;box-sizing: border-box;">
			<view style="box-sizing: border-box;" @click="goBack">
				<view style="border: 2rpx solid #E5E6E8;border-radius: 24rpx;background-color: #FFF;">
					<image style="width: 36rpx;height: 36rpx;margin: 16rpx 16rpx 4rpx;"
						src="/static/images/icon/left-icon.png"></image>
				</view>
			</view>
			<view style="color: #232426;font-size: 32rpx;font-weight: 500;padding-left: 80rpx;">
				{{title}}
			</view>
			<view @click="submit"
				style="width: 120rpx;border: 2rpx solid #27C5D6;border-radius: 24rpx;background-color: #27C5D6;color: #FFF; text-align: center;">
				儲存
			</view>
		</view>

		<view style="margin-top: 24rpx; width: 100%;box-sizing: border-box;padding: 0 30rpx;">

			<view v-if="type == 1">
				<view class="list-item">
					<view class="list-item-title">
						<view class="item-subtitle">
							<u-input name="name" placeholder="ORID" v-model="content" border="none"></u-input>
						</view>
					</view>
				</view>
				<view style="margin-top: 32rpx; color: #6A707C;font-size: 22rpx;">
					變更後將無法修改。請輸入 5 至 8 個英文字母或數字，避免使用空格與標點符號（如 @、#、$ 等），此憑證將用於平台內的身份驗證。
				</view>
			</view>
			<view v-if="type == 2">
				<view class="list-item">
					<view class="list-item-title">
						<view class="item-subtitle">
							<u-input name="name" placeholder="請輸入昵稱" v-model="content" border="none"></u-input>
						</view>
					</view>
				</view>
				<view style="margin-top: 32rpx; color: #6A707C;font-size: 22rpx;">
					請輸入 5 - 24 個字符，避免使用空格和標點符號（如 @、#、$ 等）
				</view>
			</view>
			<view v-if="type == 3">
				<view class="">
					<view class="list-item-title">
						<view class="item-subtitle" style="width: 100%;">
							<u--textarea v-model="content" placeholder="介紹一下自己吧" border="none" maxlength="75"
								height="240"></u--textarea>
						</view>
					</view>
				</view>
				<view style="margin-top: 32rpx; color: #6A707C;font-size: 22rpx;">
					請輸入 2 - 75 個字符，避免使用空格和標點符號（如 @、#、$ 等）
				</view>
			</view>
			<view v-if="type == 6" class="edit-city">
				<view class="header">
					<view class="header-site">
						<view class="header-site-title">所在區域</view>
						<view class="header-site-info">{{content}}</view>
					</view>
				</view>
				<view class="body">
					<view class="left-colum">
						<view class="left-colum-title">國家</view>
						<view class="left-colum-list">
							<view v-for="(item, index) in cityList" :key="index" >
								<view class="left-colum-item" :class="{active:item.id == countryId }" @click="checkCountry(item.id)">{{item.title}}</view>
							</view>
						</view>
					</view>
					<view class="right-colum">
						<view class="right-colum-title">城市</view>
						<view class="right-colum-list">
							<view v-for="(item, index) in cityList" :key="index">
								<view v-for="(item_, index_) in item.citys" v-show="item.id == countryId" :key="index_">
									<view class="right-colum-item" :class="{active:item_.id == cityId }" @click="checkCity(item_.id, item.title, item_.title)">{{item_.title}}</view>
								</view>
								
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="type == 7">
				<view style="width: 100%;">
					<view style="display: flex;justify-content: space-between;align-items: center;">
						<view
							style="display: flex;justify-content: flex-start;background-color: #fff;width: 75%;padding: 28rpx 24rpx;border-radius: 24rpx;">
							<u-input name="name" placeholder="請輸入達人身份" v-model="job" border="none" @input="handleInput"></u-input>
							<view style="color: #808690;font-size: 24rpx;">{{textNum}}/5</view>
						</view>
						<view>
							<view @click="addJob" style="background-color: #FFF;border-radius: 24rpx;padding: 32rpx;">
								<u-icon size="40" name="plus-circle"></u-icon>
							</view>
						</view>
					</view>
				</view>
				<view style="margin-top: 32rpx; color: #6A707C;font-size: 22rpx;">
					請新增 1-5 個達人身份，可幫助您定位更明確。（如 設計師、工程師.....等）
				</view>
				<view v-if="jobList.length > 0">
					<view></view>
					<view style="display: flex;justify-content: space-between;align-items: center;box-sizing: border-box;margin-top: 20rpx;">
						<view style="display: flex;justify-content: flex-start;align-items: center;">
							<view style="color: #232426;font-size: 36rpx;font-weight: 500;">已新增</view>
							<view style="color: #808690;font-size: 22rpx;margin-left: 20rpx;">前台顯示達人身份</view>
						</view>
						<view @click="removeAllJob">
							<u-icon size="40" name="trash"></u-icon>
						</view>
					</view>
					<view>
						<view class="filter-list">
							<view class="item-active" v-for="(item, index) in jobList" :key="index" @click="removeJob(index)">
								<u-icon name="minus" size="22" :bold="true" color="#1AAEC0" style="margin-right: 8rpx;"></u-icon>
								{{item}}
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>



	</view>
</template>

<script>
	import { profileUser, getAllCountriesWithCities} from '@/config/api.js';
	export default {
		data() {
			return {
				title: '编辑用户资讯',
				type: 0,
				content: '',
				textNum: 0, //字数统计
				job: '',
				jobList: [],
				lang:'zh_tw',
				countryId:1,
				cityId:0,
				country:'',
				city:'',
				cityList:[]
			}
		},
		onLoad(option) {
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('initData', (data) => {
				console.log('接收到A页面数据:', data);
				this.type = data.type; // 存储到页面data中
				this.content = data.data;
				if (this.type == 7) {
					this.setJob();
				} else if(this.type == 6){
					this.title = '編輯位置';
					this.getCityData()
				}
			});
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			setJob() {
				if(this.content && this.content.length > 0){
					const arr = this.content.split(',');
					this.jobList = arr;
				}
			},
			addJob(){
				if( !this.job && this.job.length < 1 ){
					uni.showToast({
						icon:'none',
						title:'職位名稱不能為空'
					})
					return;
				}
				if( this.jobList.length >= 2 ){
					uni.showToast({
						icon:'none',
						title:'不能超過2個職位'
					})
					return;
				}
				const job = this.job;
				this.jobList.push(job);
				this.job = '';
			},
			removeJob(index){
				this.jobList.splice(index, 1); 
			},
			removeAllJob(){
				this.jobList = [];
			},
			//标题字数统计
			handleInput(e){
				this.textNum = this.job.replace(/[\s\n]/g, '').length;
				if( this.textNum > 5 ){
					this.$nextTick(() => {
					    this.job = this.job.slice(0, 5)
					})
				}
			},
			//獲取城市數據
			getCityData(){
				let that = this;
				
				let data = {
					params:{}
				}
				getAllCountriesWithCities(data).then((res) => {
					
					let resData = [];
					for( const obj in res ){
						
						let cityObj = [];
						
						for( const ob in res[obj].cities ){
							
							let reset = {
								id:res[obj].cities[ob].id,
								title:res[obj].cities[ob].title,
							}
							
							cityObj.push(reset);
						}
						
						let countryObj = {
							id:res[obj].id,
							title:res[obj].title,
							citys:cityObj
						}
						
						resData.push(countryObj);
					}
					
					console.log(resData);
					that.cityList = resData;
					
					uni.hideLoading();
					
				}).catch(() =>{
					
				})
			},
			//切換國家
			checkCountry(id){
				this.countryId = id;
			},
			//選擇城市
			checkCity(id, countryName, cityName){
				this.cityId = id;
				this.city = cityName;
				this.country = countryName;
			},
			submit() {
				let data = {}
				if (this.type == 1) {
					data = {
						orid: this.content
					}
				} else if (this.type == 2) {
					// data = this.form.nickname
					data = {
						nickname: this.content
					}
				} else if (this.type == 3) {
					// data = this.form.bio
					data = {
						bio: this.content
					}
				} else if(this.type == 6){
					data = {
						// address: this.country+','+this.city
						address: this.city
					}
				} else if(this.type == 7) {
					data = {
						job: this.jobList.join(',')
					}
				} else {
					uni.showToast({
						icon:'none',
						title:'暫不支持的修改類型'
					})
				}

				this.save(data)
			},
			save(data) {
				let that = this;
				profileUser(data).then((res) => {
					//success
					uni.showToast({
						icon:'none',
						title:'編輯成功'
					})
					
					setTimeout(() => {
					  uni.navigateBack()
					}, 1500)
					
				}).catch(() => {

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		background-color: #F6F8FA;
		min-height: 100vh;
	}

	.list-item {
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 34rpx 24rpx;
		background-color: #FFF;
		margin-top: 2rpx;

		.list-item-title {
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.item-title {
				display: flex;
				justify-content: flex-start;
				width: 144rpx;

				.title {
					color: #232426;
					font-size: 28rpx;
					font-weight: 500;
				}

				.warning-bag {
					color: #FF3D43;
					margin-left: 10rpx;
				}
			}

			.item-subtitle {
				color: #BEC0C5;
				font-size: 28rpx;
				font-weight: 500;
				margin-left: 24rpx;
			}
		}

	}

	.list-item:first-of-type {
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
	}

	.list-item:last-of-type {
		border-bottom-left-radius: 24rpx;
		border-bottom-right-radius: 24rpx;
	}

	.container {
		position: relative;
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;

		.imgs {
			position: absolute;
			top: 50%;
			/* 顶部定位到父容器 50% 位置 */
			left: 50%;
			/* 左侧定位到父容器 50% 位置 */
			transform: translate(-50%, -50%);
			/* 自身宽高的 -50% 偏移 */
			width: 100%;
			text-align: center;
		}

		.footer {
			width: 100%;
			position: absolute;
			display: flex;
			justify-content: space-between;
			padding: 0 50rpx;
			box-sizing: border-box;
			bottom: 50rpx;

			.btn {
				color: #FFF;
			}
		}
	}

	.user-search-popup {
		width: 100%;
		background-color: #FAFAFA;
		padding: 24rpx 48rpx;
		box-sizing: border-box;

		.search-popup-item {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 20rpx;

			.title {
				margin-left: 20rpx;
				font-size: 24rpx;
				color: #232426;
			}

			.highlight {
				color: #27C5D6;
				/* 红色高亮 */
				font-weight: bold;
				/* 可选：加粗强调 */
			}
		}
	}

	.popup-push-type {
		padding: 58rpx 40rpx 28rpx;

		.popup-push-header {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.site {
				color: #808690;
				font-size: 32rpx;
			}

			.title {
				color: #232426;
				font-size: 30rpx;
				font-weight: 600;
			}

			.btn {
				color: #27C5D6;
				font-size: 32rpx;
			}
		}

		.popup-push-body {
			margin-top: 24rpx;

			.popup-push-list {

				box-sizing: border-box;

				.popup-push-item {
					margin-top: 32rpx;
					padding: 20rpx 48rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					background: #F6F8FA;
					border-radius: 120rpx;

					.popup-push-icon {}

					.popup-push-radio {
						border-radius: 50%;
						width: 48rpx;
						height: 48rpx;
						background-color: #E5E6E8;
					}

					.popup-push-text {
						margin-left: 32rpx;
						width: 400rpx;

						.title {
							font-size: 28rpx;
							font-weight: 600;
						}

						.describe {
							color: #6A707C;
							font-size: 24rpx;
						}
					}

					.popup-push-arrow {
						margin-left: 32rpx;
					}

				}
			}
		}
	}
	.filter-list{
		margin-top: 50rpx;
		display: flex;
		flex-wrap: wrap;
		
		.item-active{
			font-size: 28rpx;
			color: #1AAEC0;
			border: 2rpx solid #1AAEC0;
			border-radius: 200rpx;
			padding: 12rpx 26rpx;
			margin-bottom: 24rpx;
			margin-right: 20rpx;
			display: flex;
			justify-content: center;
		}
		
		.item{
			font-size: 28rpx;
			color: #232426;
			border: 2rpx solid #E5E6E8;
			border-radius: 200rpx;
			padding: 12rpx 26rpx;
			margin-bottom: 24rpx;
			margin-right: 20rpx;
		}
	}
	.edit-city{
		.header{
			margin: 0 auto 10rpx;
			display: flex;
			justify-content: space-between;
			padding: 70rpx 60rpx 20rpx;
			background-color: #FFF;
			
			.header-site{
				.header-site-title{
					color: #808690;
					font-size: 22rpx;
				}
				.header-site-info{
					color: #232426;
					font-size: 32rpx;
					margin-top: 20rpx;
					font-weight: 500;
				}
			}
			.header-btn{
				display: flex;
				justify-content: center;
				border: 2rpx solid #E5E6E8;
				box-shadow: 0rpx 4rpx 0rpx 0rpx rgba(0,0,0,0.02);
				border-radius: 200rpx 200rpx 200rpx 200rpx;
				height: 68rpx;
				width: 238rpx;
				
				.header-btn-image{
					margin: 18rpx 10rpx 0;
				}
				.header-btn-title{
					font-size: 28rpx;
					color: #232426;
					font-weight: 400;
					line-height: 68rpx;
				}
			}
			
		}
		.body{
			background-color: #FFF;
			width: 100%;
			display: flex;
			justify-content: space-between;
			
			.left-colum{
				width: 50%;
				padding: 15rpx 0;
				
				
				.left-colum-title{
					font-weight: 400;
					font-size: 22rpx;
					color: #808690;
					text-align: left;
					padding: 12rpx 60rpx;
				}
				.left-colum-list{
					background-color: #F6F8FA;
					
					.left-colum-item{
						font-size: 28rpx;
						color: #232426;
						text-align: left;
						height: 120rpx;
						line-height: 120rpx;
						padding: 0 60rpx;
					}
					
					.active{
						background-color: #FFF;
						color: #1AAEC0;
					}
				}
			}
			.right-colum{
				width: 50%;
				padding: 15rpx 0;
				
				.right-colum-title{
					font-weight: 400;
					font-size: 22rpx;
					color: #808690;
					text-align: left;
					padding: 12rpx 60rpx;
				}
				.right-colum-list{
					
					
					.right-colum-item{
						font-size: 28rpx;
						color: #232426;
						text-align: left;
						height: 120rpx;
						line-height: 120rpx;
						padding: 0 60rpx;
					}
					
					.active{
						background-color: #FFF;
						color: #1AAEC0;
					}
				}
			}
		}
	}
</style>